<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		  <style>
                   div#box{
                      text-align：center
                           }
                   div#box div#bth{
                      margin: auto;
                      width: 50px;
                      height: 50px:
                      line-height:50px;
                      background-color:#ddd;
                      dorder-ruadius:100px;
                      color: #fff;
                      cursor:pointer;
                                   }
           </style>
	</head>
	<body>
		<div id="box">
			<div id="both">开</div>
			<img id="img" src="../../../img/banner1.png" alt=""/>
		</div>
		<script>
			(function(){
				var bth = document.queryselector("#btn");
				var img = document.queryselector(#img);
				btn.onClick =function(){
					console.log("this:",this);
					if(this.innerHTML =="开") {
						img.src = "img/"
						this.innnerHTML = "关";
						this.style.backgroundColor = "grenen";
					}	else{
						img.src = "img"
						this.innerHTML = "开";
						this.style.backgroundColor = "#ddd"
					}
					
				}
			}())
		</script>
	</body>
</html>
